<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Vue入门指南——类与样式绑定</title>
        <link rel="stylesheet" href="common.css">
        <script type="importmap">
            {
                "imports": {
                    "vue": "https://lib.baomitu.com/vue/latest/vue.esm-browser.js"
                }
            }
        </script>
        <style>
            .static{
                font-size: 20px;
            }
            .active{
                font-style: italic;
            }
            .text-danger{
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <p class="static" :class="{active: isActive,'text-danger': hasError}">内敛对象字面量形式</p>
            <p :class="classObject">直接绑定对象</p>
            <p :class="classObject2">使用计算属性</p>
            <p :class="[activeClass, errorClass]">使用数组</p>
            <p :style="{color: activeColor, fontSize: fontSize + 'px'}">内联样式</p>
            <p :style="styleObject">绑定一个样式对象</p>
        </div>
        <script type="module">
            import { createApp } from 'vue';
            createApp({
                data() {
                    return {
                        isActive: true,
                        hasError: true,
                        classObject: {
                            active: true,
                            'text-danger': true
                        },
                        error:null,
                        activeClass: 'active',
                        errorClass: 'text-danger',
                        activeColor: 'red',
                        fontSize: '30px',
                        styleObject: {
                            color: 'red',
                            fontSize: '40px'
                        }
                    };
                },
                computed: {
                    classObject2() {
                        return {
                            active: this.isActive && !this.error,
                            'text-danger': this.error && this.error.type === 'fatal'
                        }
                    }
                }
            }).mount('#app');
        </script>
    </body>
</html>

